<template>
  <div id="app">
    <h1 ref="getHelement">{{ message }}</h1>
    <Student ref="getStudentComponent" />
    <button @click="getH">点我拿到DOM元素</button>
    <button @click="getStudentC">点我拿到组件实例</button>
  </div>
</template>
<script>
/*
## ref属性
`ref`
- **预期**：`string`
  `ref` 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 `$refs` 对象上。
  如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
*/
import Student from "./components/Student.vue";

export default {
  name: "App",
  data() {
    return {
      message: "欢迎学习Vue",
    };
  },
  components: {
    Student,
  },
  methods: {
    getH() {
      console.log(this.$refs.getHelement);//this.$refs.ref名字 获取h1元素
      
    },
    getStudentC() {
      console.log(this.$refs.getStudentComponent);//this.$refs.ref名字 获取组件实例
     

    },
  },
};
</script>
<style lang="less">
</style>
